<template>
      <div class="pageLevel service-details">
        <!--        操作框-->
        <div class="tableSearch">
          <el-form label-width="15px" class="demo-ruleForm">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="back">返回</el-button>
              <el-button v-if='handle != "see"' type="primary" size='mini' @click="saveFormData('dataForm')">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--   表单     -->
        <el-form label-width='150px' label-position='right' :model='formData' :rules='ruleFormData' ref='dataForm'>
          <el-row>
            <el-form-item label="服务商性质：">
              <span v-if='handle!="new"'>{{formData.serviceProviderNature == 0 ? '企业' :  '个人'}}</span>
              <el-select v-else v-model="formData.serviceProviderNature" placeholder="服务商性质" style='width:200px'
                         @change='handleSelectChange' size='small'>
                <el-option v-for='item in serviceNatureList' :label="item.label" :value="item.value" :key='item.value'></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
              <h4 class='service-title'>基础信息</h4>
          </el-row>
          <div class='basic-info-tab'>
          <!--   个人         -->
            <template v-if='formData.serviceProviderNature'>
              <el-row>
                <el-col :span='7'>
                  <el-form-item label="姓名：" prop='name'>
                    <span v-if='handle=="see"'>{{formData.name}}</span>
                    <el-input v-else maxlength="20" class="add-input" v-model="formData.name" :disabled='handle=="see"' clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="身份证号码：" prop='idcardNumber'>
                    <span v-if='handle=="see"||handle=="see"'>{{formData.idcardNumber}}</span>
                    <el-input v-else maxlength="18" class="add-input" v-model="formData.idcardNumber" :disabled='handle=="see"'
                              @change='checkoutUser()' clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="联系手机号：" prop='linkMobile'>
                    <span v-if='handle=="see"'>{{formData.linkMobile}}</span>
                    <el-input v-else maxlength="11" class="add-input" v-model="formData.linkMobile" :disabled='handle=="see"||handle=="edit"' clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="地址：" prop='district'>
                  <span v-if='handle=="see"'>{{`${formData.province}-${formData.city}-${formData.district}-${formData.detailedAddress}`}}</span>
                  <template v-else>
                    <v-distpicker @province="onProvince" @city="onCity" @area="onDistrict"
                                  :province="formData.province" :city="formData.city" :area='formData.district'
                                  @selected='infoSelectChange()'></v-distpicker>
                    <el-input v-model='formData.detailedAddress' maxlength="50" placeholder='详细地址（50字以内）' style='width: 400px' size='small'></el-input>

                  </template>
                </el-form-item>
              </el-row>
            </template>
            <!--   企业         -->
            <template v-else>
              <el-row>
                <el-col :span='7'>
                  <el-form-item label="企业名称：" prop='name'>
                    <span v-if='handle=="see"'>{{formData.name}}</span>
                    <el-input v-else maxlength="50" class="add-input" v-model="formData.name" clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="统一社会信用代码：" prop='creditCode'>
                    <span v-if='handle=="see"'>{{formData.creditCode}}</span>
                    <el-input v-else maxlength="18" class="add-input" v-model="formData.creditCode" clearable size='small'
                              @keyup.native='replace(formData,"creditCode")' @change='checkoutUser()'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="企业法人：" prop='principal'>
                    <span v-if='handle=="see"'>{{formData.principal}}</span>
                    <el-input v-else maxlength="20" class="add-input" v-model="formData.principal" clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span='7'>
                  <el-form-item label="法人身份证号码：" prop='idcardNumber'>
                    <span v-if='handle=="see"'>{{formData.idcardNumber}}</span>
                    <el-input v-else maxlength="18" class="add-input" v-model="formData.idcardNumber" clearable size='small'
                              @keyup.native='replace(formData,"idcardNumber")'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="联系人：" prop='linkName'>
                    <span v-if='handle=="see"'>{{formData.linkName}}</span>
                    <el-input v-else maxlength="20" class="add-input" v-model="formData.linkName" clearable size='small'></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span='7' :offset="1">
                  <el-form-item label="联系人手机号：" prop='linkMobile'>
                    <span v-if='handle=="see"'>{{formData.linkMobile}}</span>
                    <el-input v-else maxlength="11" class="add-input" v-model="formData.linkMobile" :disabled='handle=="see"||handle=="edit"' clearable size='small'
                              @keyup.native='replace(formData,"linkMobile")' placeholder='必须为手机号'></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-form-item label="公司地址：" prop='district'>
                  <span v-if='handle=="see"'>{{`${formData.province}-${formData.city}-${formData.district}-${formData.detailedAddress}`}}</span>
                  <template v-else>
                    <v-distpicker @province="onProvince" @city="onCity" @area="onDistrict"
                                  :province="formData.province" :city="formData.city" :area='formData.district'
                                  @selected='infoSelectChange()'></v-distpicker>
                    <el-input v-model='formData.detailedAddress' maxlength="50" placeholder='详细地址（50字以内）' style='width: 400px' size='small'></el-input>

                  </template>
                </el-form-item>
              </el-row>
            </template>
          </div>
          <el-row class='line'>
              <h4 class='service-title'>分润配置信息</h4>
          </el-row>
          <el-row>
             <el-form-item label='服务商类型：'>
               <div v-if='handle == "see"'><template v-for='item in formData.list'>{{item.serviceProviderTypeName}}&nbsp;&nbsp;&nbsp;&nbsp;</template></div>
              <el-checkbox-group v-if='serviceProviderTypeList.length>0 && handle != "see"' v-model="serviceProviderTypeNumList" size="mini" :disabled='handle == "see"'>
                <el-checkbox v-for='item in serviceProviderTypeList' :label="item.serviceProviderTypeNumber" :key='item.serviceProviderTypeNumber' border
                             @change='checkoutChange($event,item.serviceProviderTypeName,item.serviceProviderTypeNumber)'>{{item.serviceProviderTypeName}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <div class='split-config-item' v-if='formData.list.length>0' v-for='(val,key) in formData.list' :key="key">
            <el-row>
              <el-form-item label='' label-width='0px' class='service-item-title'>
                <h4>{{val.serviceProviderTypeName}}</h4>
                <el-button v-if='handle == "edit"' type="danger" size='mini' @click='deleInfoItem(val.serviceProviderTypeNumber, true)'>删除</el-button>
              </el-form-item>
            </el-row>
             <el-row>
               <el-col :span='7'>
                 <el-form-item label="服务商等级：" :prop="'list.' + key +'.serviceProviderGradeNumber'" :rules='ruleConfigItem.serviceProviderGradeNumber'>
                   <span v-if='handle == "see"'>{{val.serviceProviderGradeName}}</span>
                   <template v-else>
                     <el-select v-if='addGradeList[key]' v-model="val.serviceProviderGradeNumber" placeholder="请选择" style='width:100%'
                                size='small' @visible-change='getGradeList(val.serviceProviderTypeNumber, key)'>
                       <el-option v-for='item in addGradeList[key].serviceProviderGradeList' :label="item.serviceProviderGradeName" :value="item.serviceProviderGradeNumber" :key='item.serviceProviderGradeNumber'></el-option>
                     </el-select>
                   </template>
                 </el-form-item>
               </el-col>
               <el-col :span='16' :offset='1'>
                 <el-form-item label="合作时间：" :prop="'list.' + key +'.cooperateEndTime'" :rules='ruleConfigItem.cooperateEndTime'>
                   <template v-if='addGradeList[key]'>
                     <span v-if='handle == "see"'>{{`${addGradeList[key].cooperateRange[0]}——${addGradeList[key].cooperateRange[1]}`}}</span>
                     <el-date-picker v-else v-model="addGradeList[key].cooperateRange" type="daterange" :picker-options="pickerOption"
                                     range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" size='small'
                                     @change='dateChange($event,key)' value-format='yyyy-MM-dd'>
                     </el-date-picker>
                   </template>
                 </el-form-item>
               </el-col>
             </el-row>
            <el-row>
              <el-col :span='7'>
                <el-form-item label="状态：" :prop="'list.' + key +'.status'" :rules='ruleConfigItem.status'>
                  <span v-if='handle == "see"'>{{val.status ? '停用' : '启用'}}</span>
                  <el-switch v-else v-model="val.status" active-text="启用" inactive-text="停用" @change='switchChange($event)'
                             :active-value="0" :inactive-value="1">
                  </el-switch>
                </el-form-item>
              </el-col>
              <el-col :span='16' :offset='1'>
                <el-form-item label="负责区域：" :prop="'list.' + key +'.areaDistrict'" :rules='ruleConfigItem.areaDistrict'>
                  <span v-if='handle=="see"'>{{`${val.areaProvince}-${val.areaCity}-${val.areaDistrict}`}}</span>
                  <v-distpicker v-else @province="onProvince" @city="onCity" @area="onDistrict"
                                :province="val.areaProvince" :city="val.areaCity" :area='val.areaDistrict'
                                @selected='splitSelectChange(key)'></v-distpicker>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
</template>

<script>
import util from "@/util";
import { mapState } from "vuex";
import VDistpicker from "v-distpicker";
import {
  addOrUpdateServiceProviderPerson,
  addOrUpdateServiceProvider,
  findServiceProviderTypeList,
  findServiceProviderGradeByTypeList,
  findServiceProviderDetailsInfo,
  validatedCreditCodeIsExit,
  validatedPersonIdCardIsExit
} from "@/api";
export default {
  name: "serviceProvider-details",
  data() {
    const validIdentity = (rule, value, callback) => {
      if (!util.validIdentity(value)) {
        return callback(new Error("身份证号码格式不正确！"));
      } else {
        callback();
      }
    };
    const checkMobile = (rule, value, callback) => {
      if (!util.validMobilePhone(value)) {
        return callback(new Error("手机号格式不正确 "));
      } else {
        callback();
      }
    };
    const checkAdress = (rule, value, callback) => {
      if (this.formData.detailedAddress == "") {
        return callback(new Error("请输入详细地址"));
      } else {
        callback();
      }
    };
    return {
      handle: "",
      targetId: "",
      serviceNatureList: [
        {
          label: "企业",
          value: 0
        },
        {
          label: "个人",
          value: 1
        }
      ],
      serviceProviderTypeNumList: [], //服务商类型number
      serviceProviderTypeList: [], //列表list
      selectAdress: {
        selectedProvince: "",
        selectedCity: "",
        selectedDistrict: ""
      },
      addGradeList: [], //页面操作使用数据，不必传给后台
      addInfoItem: {
        configInformationId: "", //信息id
        serviceProviderTypeNumber: "",
        serviceProviderTypeName: "",
        serviceProviderGradeNumber: "",
        cooperateStartTime: "",
        cooperateEndTime: "",
        status: 0, //状态：0-启用，1-停用
        areaProvince: "",
        areaCity: "",
        areaDistrict: ""
      },
      formData: {
        infoId: "", //服务商企业基本信息id
        serviceProviderId: "", //服务商id
        name: "", // 企业名称
        creditCode: "", //社会信用吗
        principal: "", //法人
        idcardNumber: "", //法人身份证号码/身份证号码
        linkName: "", //联系人
        linkMobile: "", //联系人手机号
        province: "",
        city: "",
        district: "", //区
        detailedAddress: "", //详细地址
        list: [], //服务商配置列表
        serviceProviderNature: 0 //服务商性质：0-企业，1-个人
      },
      ruleFormData: {
        name: [
          { required: true, message: "请输入企业名称/姓名", trigger: "blur" }
        ],
        creditCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur"
          },
          {
            min: 18,
            max: 18,
            message: "统一社会信用代码格式不正确",
            trigger: "blur"
          }
        ],
        principal: [
          { required: true, message: "请输入法人名称", trigger: "blur" },
          { min: 2, max: 20, message: "格式不正确", trigger: "blur" }
        ],
        idcardNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: validIdentity, trigger: "blur" }
        ],
        linkName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
          { min: 2, max: 20, message: "格式不正确", trigger: "blur" }
        ],
        linkMobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ],
        district: [
          { required: true, message: "请选择地址", trigger: "change" },
          { validator: checkAdress, trigger: "blur" }
        ]
      },
      //分润配置循环列表验证
      ruleConfigItem: {
        areaDistrict: [
          { required: true, message: "请选择区域", trigger: "change" }
        ],
        cooperateEndTime: [
          { required: true, message: "请选择合作时间", trigger: "blur" }
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
        serviceProviderGradeNumber: [
          { required: true, message: "请选择服务商等级", trigger: "change" }
        ]
      },
      pickerOption: {
        shortcuts: [
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  components: { VDistpicker },
  computed: mapState(["merchantId", "sub", "power", "isReLoadData"]),
  created() {
    this.handle = util.getQuery("handle");
    this.targetId = util.getQuery("targetId");
    this.getServiceTypeList();
  },
  mounted() {
    if (this.handle != "new") {
      this.getServiceDetails();
    }
  },
  methods: {
    //根据信用代码/手机号验证
    checkoutUser() {
      let data = {
        infoId: '',
        shopId: this.merchantId
      }
      if(this.handle == 'edit'){
        data.infoId = this.targetId
        data.shopId = this.formData.shopId
      }
      //个人
      if(this.formData.serviceProviderNature){
        if(this.formData.idcardNumber && util.validIdentity(this.formData.idcardNumber)) {
          data.idcardNumber = this.formData.idcardNumber
          validatedPersonIdCardIsExit(data).then(res => {
            if(res.code == 200) {
              if(res.data.status == 1){
                this.goEdit(res.data.message, res.data.infoId);
              }
            } else {
              this.tipsInfo(res.msg);
            }
          })
        }
      } else {        //企业
        if(this.formData.creditCode && util.validSocialCreditCode(this.formData.creditCode)) {
          data.creditCode = this.formData.creditCode
          validatedCreditCodeIsExit(data).then(res => {
            if(res.code == 200) {
              if(res.data.status == 1){
                this.goEdit(res.data.message, res.data.infoId);
              }
            } else {
              this.tipsInfo(res.msg);
            }
          })
        }
      }
    },
    getGradeList(id, key) {
      if (
        this.handle == "edit" &&
        !this.addGradeList[key].serviceProviderGradeList.exit
      ) {
        findServiceProviderGradeByTypeList({
          serviceProviderTypeNumber: id
        }).then(res => {
          if (res.code == 200) {
            let list = res.data.list;
            this.addGradeList[key].serviceProviderGradeList = list;
            this.$set(
              this.addGradeList[key].serviceProviderGradeList,
              "exit",
              true
            );
          } else {
            this.tips(res.msg, "error");
          }
        });
      }
    },
    //获取详情
    getServiceDetails() {
      let data = {
        infoId: this.targetId
      };
      findServiceProviderDetailsInfo(data).then(res => {
        if (res.code == 200) {
          let typeList = res.data.list;
          this.formData = res.data;
          this.serviceProviderTypeNumList=[];
          this.addGradeList=[]
          for (let i = 0; i < typeList.length; i++) {
            var rangeArr = [];
            rangeArr.push(util.foryear(typeList[i].cooperateStartTime));
            rangeArr.push(util.foryear(typeList[i].cooperateEndTime));
            this.addGradeList.push({
              serviceProviderGradeList: [
                {
                  serviceProviderGradeNumber:
                    typeList[i].serviceProviderGradeNumber,
                  serviceProviderGradeName:
                    typeList[i].serviceProviderGradeName,
                  serviceProviderTypeNumber:
                    typeList[i].serviceProviderTypeNumber
                }
              ],
              cooperateRange: rangeArr //合作时间范围
            });
            this.serviceProviderTypeNumList.push(
              typeList[i].serviceProviderTypeNumber
            );
          }
        }
      });
    },
    //提交表单
    saveFormData(dataForm) {
      this.$refs[dataForm].validate(valid => {
        if (valid) {
          let data = this.formData;
          if (this.handle == "new") {
            data.shopId = this.merchantId;
          }
          if (data.list.length != 0) {
            data.list.forEach(i => {
              if (typeof i.cooperateEndTime == "number") {
                i.cooperateStartTime = util.foryear(i.cooperateStartTime);
                i.cooperateEndTime = util.foryear(i.cooperateEndTime);
              }
            });
          }
          switch (this.formData.serviceProviderNature) {
            //公司服务商
            case 0:
              addOrUpdateServiceProvider(data).then(res => {
                if (res.code == 200) {
                  if (!res.data || !res.data.message) {
                    this.tips("保存成功!", "success");
                    util.routerTo(
                      "/operate-management/serviceProvider-management/serviceProvider-list"
                    );
                    return;
                  }
                  if (res.data.status == 1) {
                    this.goEdit(res.data.message, res.data.infoId);
                  } else if (res.data.status == 2) {
                    this.tipsInfo(res.data.message);
                  }
                } else {
                  if (
                    res.msg == "平台已存在信息服务商，无法再次创建信息服务商"
                  ) {
                    this.tipsInfo(res.msg);
                  } else if (
                    res.msg ==
                    "该企业已是其他品牌的招商服务商，不可再成为招商服务商"
                  ) {
                    this.tipsInfo(res.msg);
                  } else {
                    this.tips(res.msg, "error");
                  }
                }
              });
              break;
            //个人
            case 1:
              addOrUpdateServiceProviderPerson(data).then(res => {
                if (res.code == 200) {
                  if (!res.data || !res.data.message) {
                    this.tips("保存成功!", "success");
                    util.routerTo(
                      "/operate-management/serviceProvider-management/serviceProvider-list"
                    );
                    return;
                  }
                  if (res.data.status == 1) {
                    this.goEdit(res.data.message, res.data.infoId);
                  } else if (res.data.status == 2) {
                    this.tipsInfo(res.data.message);
                  }
                } else {
                  this.tips(res.msg, "error");
                }
              });
              break;
          }
        }
      });
    },
    //去已存在页面编辑
    goEdit(msg, infoId) {
      this.$confirm(msg, "提示", {
        confirmButtonText: "去编辑",
        cancelButtonText: "关闭",
        showClose: false
      })
        .then(() => {
          //确定执行的操作
          util.routerReplace(
            "/operate-management/serviceProvider-management/serviceProvider-list/serviceProvider-details",
            {
              handle: "edit",
              targetId: infoId
            }
          );
          this.handle = util.getQuery("handle");
          this.targetId = util.getQuery("targetId");
          this.getServiceTypeList();
          this.getServiceDetails();
        })
        .catch(() => {
          //取消执行的操作
        });
    },
    //服务商类型
    getServiceTypeList() {
      findServiceProviderTypeList().then(res => {
        if (res.code == 200) {
          this.serviceProviderTypeList = res.data.list;
        } else {
          this.tips(res.msg, "error");
        }
      });
    },
    //服务商等级
    getServiceGradeList(num) {
      let datas = {
        serviceProviderTypeNumber: num
      };
      findServiceProviderGradeByTypeList(datas).then(res => {
        if (res.code == 200) {
          let list = res.data.list;
          this.addGradeList.push({
            serviceProviderGradeList: list,
            cooperateRange: [] //合作时间范围
          });
          this.formData.list.push(JSON.parse(JSON.stringify(this.addInfoItem)));
          for (var i = 0; i < this.formData.list.length; i++) {
            this.formData.list[
              i
            ].serviceProviderGradeNumber = this.addGradeList[
              i
            ].serviceProviderGradeList[0].serviceProviderGradeNumber;
          }
        } else {
          this.tips(res.msg, "error");
        }
      });
    },
    //信息部分地址选择
    infoSelectChange() {
      this.formData.province = this.selectAdress.selectedProvince;
      this.formData.city = this.selectAdress.selectedCity;
      this.formData.district = this.selectAdress.selectedDistrict;
    },
    //服务商分润部分地址选择
    splitSelectChange(index) {
      this.formData.list[
        index
      ].areaProvince = this.selectAdress.selectedProvince;
      this.formData.list[index].areaCity = this.selectAdress.selectedCity;
      this.formData.list[
        index
      ].areaDistrict = this.selectAdress.selectedDistrict;
    },
    switchChange(val) {
    },
    //选择/取消服务商类型
    checkoutChange(val, name, id) {
      // 添加/删除分润配置表单
      if (val) {
        this.addInfoItem.serviceProviderTypeNumber = id;
        this.addInfoItem.serviceProviderTypeName = name;
        this.getServiceGradeList(id);
      } else {
        this.deleInfoItem(id);
      }
    },
    dateChange(val, key) {
      this.formData.list[key].cooperateStartTime = val[0];
      this.formData.list[key].cooperateEndTime = val[1];
    },
    //删除服务商分润
    deleInfoItem(id, btn = false) {
      let len = this.formData.list.length;
      let deleIndex = "";
      for (var i = 0; i < len; i++) {
        if (this.formData.list[i].serviceProviderTypeNumber == id) {
          deleIndex = i;
          break;
        }
      }
      if (btn) {
        this.$confirm("确定要删除吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          showClose: false
        })
          .then(() => {
            //确定执行的操作
            this.addGradeList.splice(deleIndex, 1);
            this.formData.list.splice(deleIndex, 1);
            this.serviceProviderTypeNumList.splice(deleIndex, 1);
          })
          .catch(() => {
            //取消执行的操作
          });
      } else {
        this.addGradeList.splice(deleIndex, 1);
        this.formData.list.splice(deleIndex, 1);
      }
    },
    handleSelectChange(val) {
      this.$refs.dataForm.resetFields();
      //切换时清空地址信息及配置信息
      this.formData.province=''
      this.formData.city=''
      this.formData.district=''
      this.formData.detailedAddress=''
      this.formData.list=[]
      this.serviceProviderTypeNumList=[]
      this.addGradeList.forEach(ele => {
        ele.cooperateRange = [];
      });
    },
    //选择区域
    onProvince(data) {
      this.selectAdress.selectedProvince = data.value;
    },
    onCity(data) {
      this.selectAdress.selectedCity = data.value;
    },
    onDistrict(data) {
      this.selectAdress.selectedDistrict = data.value;
    },
    //字符串过滤
    replace(obj, key) {
      let that = this;
      let event = event || window.event;
      if (event.keyCode == 13) {
        setTimeout(() => {
          that.validItem(obj, key);
        }, 100);
      } else {
        that.validItem(obj, key);
      }
    },
    validItem(obj, key) {
      let res = "";
      switch (key) {
        case "linkMobile":
          res = util.replaceNumber(obj[key]);
          break;
        case "creditCode":
        case "idcardNumber":
          res = util.replaceSocialCreditCode(obj[key]);
          break;
      }
      this.$set(obj, key, res);
    },
    tips(tip, type) {
      this.$message({
        message: tip,
        type: type
      });
    },
    tipsInfo(txt) {
      this.$alert(txt, "提示", {
        confirmButtonText: "确定",
        showClose: false,
        callback: action => {
          //关闭后执行的操作
        }
      });
    },
    back() {
      window.history.back(-1);
      return false;
    }
  }
};
</script>
<style lang='less'>
.service-details {
  .distpicker-address-wrapper {
    display: inline-block;
    select {
      height: 36px;
      color: #606266;
      font-size: 14px;
      min-width: 137px;
      outline: none;
      cursor: pointer;
    }
  }
}
</style>
<style lang='less' scoped>
.service-details {
  .line {
    border-top: 1px solid #dcdfe6;
    padding-top: 20px;
  }
  .service-title {
    padding-bottom: 15px;
  }
  .service-item-title {
    h4 {
      display: inline-block;
      margin-right: 40px;
    }
  }
}
</style>
